<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>all</title>
   <style>
       div{
    width: 500px;
    height: 500px;
    background-color: pink;
    text-align: center;
    
}
input{
    -webkit-appearance: none;
    width: 50px;
    height: 50px;
}

#red{
    background-color: red;

}
#blue{
    background-color:blue;
}
#one{
    background-color: green;
}
#two{
    background-color: indigo;
}
#th{
    background-color: burlywood;
}
#red:checked ~ div{
    background-color:red;
}
#blue:checked ~ div{
    background-color:blue;
}
#one:checked ~ div{
    background-color: green;
}
#two:checked ~ div{
    background-color:indigo;
}
#th:checked ~ div{
    background-color:burlywood;
}

input:checked{
    border-radius: 50%;
}
   </style>
</head>
<body>
    
        <input id="red" type="radio" name="bgs"/>
        <input  id="blue" type="radio" name="bgs"/>
        <input id="one" type="radio" name="bgs"/>
        <input  id="two" type="radio" name="bgs"/>
        <input id="th" type="radio" name="bgs"/>
        
        <div>我的颜色会变</div>
        
    
</body>
</html>